

/* Facts Section */
.facts {
        padding-top: 60px;
        margin: 0;
}


.facts .container {
        padding-left: 0;
        padding-right: 0;
}

.facts-header {
        font-size: 2.5rem;
        font-weight: bold;
        color: #222;
        margin-bottom: 40px;
}

/* Grid Layout for Fact Boxes */
.row.gx-0 {
        margin-right: 0;
        margin-left: 0;
}

.col-lg-4 {
        padding-left: 0;
        padding-right: 0;
}

/* Facts Box */
.facts-box {
        min-height: 180px;
        transition: transform 0.3s ease;
        color: #333;
        text-align: left;
        border-radius: 25px;
        background-color: #f8f9fa;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
}


.facts-icon {
        font-size: 40px;
}


.facts-title {
        font-size: 1.25rem;
        font-weight: bold;
}

.facts-description {
        font-size: 1rem;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
        .facts-header {
                font-size: 2rem;
        }

        .facts-box {
                min-height: 160px;
                padding: 15px;
        }

        .facts-icon {
                font-size: 35px;
        }

        .facts-title {
                font-size: 1.1rem;
        }

        .facts-description {
                font-size: 0.9rem;
        }
}

/* Onboarding Process Section */
.onboarding-process {
        margin: 0;
}

/* Header Style */
.onboarding-header {
        font-size: 2.5rem;
        font-weight: bold;
        color: #222;
}

/* Step Box Style */
.step-box {
        min-height: 300px;
        max-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.step-title {
        margin-bottom: 15px;
}

.step-icon {
        margin-bottom: 15px;
}


.step-1 {
        background-color: red;
        color: white;
}


.step-2 {
        background-color: black;
        color: white;
}


.step-3 {
        background-color: red;
        color: white;
}


.step-4 {
        background-color: black;
        color: white;
}

/* Responsive Styles for smaller screens */
@media (max-width: 768px) {
        .onboarding-header {
                font-size: 2rem;
        }

        .step-box {
                min-height: 260px;
                max-height: 260px;
        }

        .step-title {
                font-size: 1.1rem;
        }

        .step-icon i {
                font-size: 2.5rem;
        }
}

/* General Styles for Both Sections */
.cta {
        position: relative;
        color: white;
        text-align: center;
        padding: 60px 0;
}

/* First Section (with Background Image) */
.cta-1 {
        background-color: #d32f2f;
        background-image: url('https://images.unsplash.com/photo-1516862523118-a3724eb136d7?crop=entropy&cs=tinysrgb&fit=max&ixid=MnwzNjU5NXwwfDF8c2VhY2h8OHx8Y2FiJTIwcmlkZXxlbnwwfHx8fDE2Mzc5MjM1MDM&ixlib=rb-1.2.1&q=80&w=1080');
        background-size: cover;
        background-position: center center;
        height: 850px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
}

/* Dark Overlay for First Section */
.cta-1 .cta-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
}

/* Logo Section Styling */
.cta-1 .cta-logo {
        position: absolute;
        top: 5px;
        left: 147px;
        z-index: 2;
}

.cta-1 .cta-logo img {
        height: 60px;
        width: auto;
}

/* Content Styling for First Section */
.cta-1 .cta-content {
        position: relative;
        z-index: 10;
}

.cta-1 .cta-content h2,
.cta-1 .cta-content p {
        color: white;
}

.cta-1 .apply-btn {
        background-color: white;
        color: #d32f2f;
        border-radius: 50px;
        padding: 12px 30px;
        font-weight: bold;
        transition: background-color 0.3s ease, color 0.3s ease;
}


.cta-1 .apply-btn i {
        font-size: 1.5rem;
        margin-right: 10px;
}

.cta-2 {
        background-color: #d32f2f;
        color: white;
        margin: 0;
}

.cta-2 .container {
        padding: 0;
}

.cta-2 .cta-content h2,
.cta-2 .cta-content p {
        color: white;
}


.cta-2 .apply-btn {
        background-color: white;
        color: #d32f2f;
        border-radius: 50px;
        padding: 12px 30px;
        font-weight: bold;
        transition: background-color 0.3s ease, color 0.3s ease;
        display: inline-flex;
        align-items: center;
}


.cta-2 .apply-btn i {
        font-size: 1.5rem;
        margin-right: 10px;
}